<template>
    <div>
        <el-card>
            <el-descriptions class="margin-top" title="简介" :column="2" border>
                <template #extra>
              
                </template>

               

                <el-descriptions-item label="用户头像">
                    <img class="img" :src=avatar alt="" />
                </el-descriptions-item>
                <el-descriptions-item label="用户昵称">
                    {{ nickname }}
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                    <template slot="label">
                        <i class="el-icon-male"></i>
                        <i class="el-icon-female"></i>
                    </template>
                    <el-tag size="small">{{ sex }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="邮箱Email">
                    <template slot="label">
                        <i class="el-icon-message"></i>

                    </template>
                    {{ email }}
                </el-descriptions-item>
                <el-descriptions-item label="手机号码">
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                    </template>
                    {{ mobilePhoneNumber }}
                </el-descriptions-item>
                <el-descriptions-item label="地区">
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                    </template>
                    {{ area }}
                </el-descriptions-item>
                <el-descriptions-item label="个性签名">
                    <template slot="label">
                        <i class="el-icon-magic-stick"></i>
                    </template>
                    {{ design }}
                </el-descriptions-item>
                <el-descriptions-item label="注册日期">
                    <template slot="label">
                        <i class="el-icon-date"></i>
                    </template>
                    {{ createDate }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
    </div>
</template>
  
<script setup>
import store from '@/store/songList/index';
import { useRoute, useRouter } from 'vue-router';
import { ref, getCurrentInstance, computed, onBeforeMount, onMounted , reactive} from 'vue';
import { getUserDetail } from '@/api/music/music.ts'
import PersonalDia from './personalDia.vue'


const accountStore = store.accountInfoStore();
const accountInfo = computed(() => accountStore.getAccountInfo);

const avatar = ref("")
const nickname = ref("")
const email = ref('')
const area = "上海"
const mobilePhoneNumber = ref('')
const sex = ref('男')
const createDate = ref('')
const design = "这个家伙很懒，什么也没留下"
const age = ref('未知')
onMounted(async () => {
    const res = await getUserDetail()
    const userInfo = res.user
    avatar.value = userInfo.avatar;
    email.value = userInfo.email;
    mobilePhoneNumber.value = userInfo.phonenumber;
    createDate.value = userInfo.loginDate;
    nickname.value = userInfo.userName;
    sex.value = userInfo.sex == 0 ? "男" : "女";

})

</script>
  
<style scoped>
.img {
    width: 80px;
    height: 80px;
}
</style>
  